<template>
  <div class="emergency">
    <el-row :gutter="20" type="flex" class="e-padding">
      <el-col :span="6" class="flex-100">
        <div class="block_b" @click="navClick(1)">
          <i class="el-icon-phone text-font"></i>
          <div>音频调度</div>
        </div>
      </el-col>
      <el-col :span="6" class="flex-100">
        <div class="block_b" @click="navClick(2)">
          <i class="el-icon-video-camera text-font"></i>
          <div>视频调度</div>
        </div>
      </el-col>
      <el-col :span="6" class="flex-100">
        <div class="block_b" @click="navClick(3)">
          <i class="el-icon-location text-font"></i>
          <div>GIS调度</div>
        </div>
      </el-col>
      <el-col :span="6" class="flex-100">
        <el-row :gutter="20" type="flex" class="flex-column flex-100">
          <el-col :span="24" class="flex-1" style="margin-bottom: 20px;">
            <div class="block_b" @click="navClick(4)">
              <i class="el-icon-message text-font1"></i>
              <div>短信调度</div>
            </div>
          </el-col>
          <el-col :span="24" class="flex-1">
            <div class="block_b" @click="navClick(5)">
              <i class="el-icon-menu text-font1"></i>
              <div>其他</div>
            </div>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data(){
    return{}
  },
  mounted(){},
  methods:{
    /**跳转事件
     * type 执行事件类型
     */
    navClick(type){
      if(type == 1){
        this.$router.push({ path: '/emergency/audio' })
      }
      if(type == 2){
        this.$router.push({ path: '/emergency/video' })
      }
      if(type == 3){
        this.$router.push({ path: '/emergency/gis' })
      }
    }
  }
}
</script>

<style scoped>
  .emergency{
    height: 100%;
  }
  .block_b{
    border: 1px solid #A3CCF1;
    border-radius: 4px;
    color: #469AE3;
    font-size: 24px;
    letter-spacing: 1px;
    font-weight: bold;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
    cursor: pointer;
  }
  .text-font{
    font-size: 120px;
    margin-bottom: 60px;
  }
  .text-font1{
    font-size: 80px;
    margin-bottom: 30px;
  }
  .e-padding{
    padding: 60px;
    height: 100%;
  }
  .flex-100{
    height: 100%;
  }
  .flex-1 {
    flex: 1;
  }
  .flex-column{
    flex-direction: column;
  }
</style>